<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <ul id="progress"> <li> <div id="layer1" class="ball"></div> <!-- layer1 control delay animation / ball is effect --> <div id="layer7" class="pulse"></div> <!-- layer7 control delay animation / pulse is effect --> </li> <li> <div id="layer2" class="ball"></div> <div id="layer8" class="pulse"></div> </li> <li> <div id="layer3" class="ball"></div> <div id="layer9" class="pulse"></div> </li> <li> <div id="layer4" class="ball"></div> <div id="layer10" class="pulse"></div> </li> <li> <div id="layer5" class="ball"></div> <div id="layer11" class="pulse"></div> </li> </ul> <a class="trigger" href="#">Start/Restart Animation</a>

ul#progress { list-style: none; width: 40%; margin: 0 auto; padding-top: 50px; padding-bottom: 50px; } ul#progress li { /* Style your list */ float: left; position: relative; width: 15px; height: 15px; border: 1px solid #fff; border-radius: 50px; margin-left: 10px; border-left: 1px solid #111; border-top: 1px solid #111; border-right: 1px solid #333; border-bottom: 1px solid #333; background: #000; } ul#progress li:first-child { margin-left: 0; } /* Remove the margin first li element */ .ball { /* Style your ball and set the animation */ background-color: #2187e7; background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff); background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff); width: 15px; height: 15px; border-radius: 50px; -moz-transform: scale(0); -webkit-transform: scale(0); -moz-animation: loading 1s linear forwards; -webkit-animation: loading 1s linear forwards; } .pulse { /* Style your second ball to create the amazing effects */ width: 15px; height: 15px; border-radius: 30px; border: 1px solid #00c6ff; box-shadow: 0 0 5px #00c6ff; position: absolute; top: -1px; left: -1px; -moz-transform: scale(0); -webkit-transform: scale(0); -webkit-animation: pulse 1s ease-out; -moz-animation: pulse 1s ease-out; } /* Control Layers */ #layer1 { -moz-animation-delay: 0.5s; -webkit-animation-delay: 0.5s; } #layer2 { -moz-animation-delay: 1s; -webkit-animation-delay: 1s; } #layer3 { -moz-animation-delay: 1.5s; -webkit-animation-delay: 1.5s; } #layer4 { -moz-animation-delay: 2s; -webkit-animation-delay: 2s; } #layer5 { -moz-animation-delay: 2.5s; -webkit-animation-delay: 2.5s; } #layer7 { -moz-animation-delay: 1.5s; -webkit-animation-delay: 1.5s; } #layer8 { -moz-animation-delay: 2s; -webkit-animation-delay: 2s; } #layer9 { -moz-animation-delay: 2.5s; -webkit-animation-delay: 2.5s; } #layer10 { -moz-animation-delay: 3s; -webkit-animation-delay: 3s; } #layer11 { -moz-animation-delay: 3.5s; -webkit-animation-delay: 3.5s; } @-moz-keyframes loading { 0% { -moz-transform: scale(0,0); } 100% { -moz-transform: scale(1,1); }; } @-webkit-keyframes loading { 0% { -webkit-transform: scale(0,0); } 100% { -webkit-transform: scale(1,1); }; } @-moz-keyframes pulse { 0% { -moz-transform: scale(0); opacity: 0; } 10% { -moz-transform: scale(1); opacity: 0.5; } 50% { -moz-transform: scale(1.75); opacity: 0; } 100% { -moz-transform: scale(0); opacity: 0; }; } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(0); opacity: 0; } 10% { -webkit-transform: scale(1); opacity: 0.5; } 50% { -webkit-transform: scale(1.75); opacity: 0; } 100% { -webkit-transform: scale(0); opacity: 0; }; }